<template>
    <div class="item3">
        <!-- ${tableComment} -->
        <section class="layer">
            <div class="box">
                <div class="box-header">
                    <span class="box-title">查询条件</span>
                </div>
                <div class="box-body">
                    <el-form ref="searchForm" :model="searchForm" label-width="60px" >
                        <el-row :gutter="12" align="left">
                            <#list searchList as searchSingle>
                                <el-col :md="12" :lg="8" :xl="6">
                                    <el-form-item label="${searchSingle.columnComment}" prop="${searchSingle.property}" >
                                        <el-input v-model="searchForm.${searchSingle.property}" clearable placeholder="请输入${searchSingle.columnComment}"/>
                                    </el-form-item>
                                </el-col>
                            </#list>
                            <el-col :md="12" :lg="8" :xl="6">
                                <el-button @click="restSearch">重置</el-button>
                                <el-button type="primary" @click="search">查询</el-button>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </div>
        </section>
        <section class="layer">
            <div class="box">
                <div class="box-header handle">
                    <span class="box-title">${tableComment}</span>
                    <div class="box-tools">
                        <el-button type="success" @click="addNewList">新增</el-button>
                    </div>
                </div>
                <div class="box-body">
                    <el-table v-loading="loading" :data="tableData" element-loading-spinner="el-loading1" border highlight-current-row>
                        <el-table-column type="index" width="50" label="序号" align="center" fixed="left"/>
                        <#list showProperty as propertyItem>
                            <el-table-column :show-overflow-tooltip="true" prop="${propertyItem.property}" label="${propertyItem.columnComment}" align="center" />
                        </#list>
                        <el-table-column label="操作" width="140" align="center" fixed="right">
                            <template slot-scope="scope">
                                <el-button type="text" @click.stop="previewRow(scope.row)">查看</el-button>
                                <el-button type="text" @click.stop="editRow(scope.row)">编辑</el-button>
                                <el-button class="delete" type="text" @click.stop="deleteRow(scope.row)">作废
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            :current-page="currentPage"
                            :page-sizes="[10, 20, 30, 50]"
                            :page-size="pageSize"
                            :total="total"
                            layout="slot, sizes, prev, pager, next, jumper"
                            @current-change="handleCurrentChange"
                            @size-change="handleSizeChange">
                        <template slot>
                            <span class="el-pagination__total">{{ `共${r'${total}'}条，显示第${r'${startRow}'}-${r'${endRow}'}条` }}</span>
                        </template>
                    </el-pagination>
                </div>
            </div>
        </section>
        <add-dialog v-if="addObj.isShow" :add-obj="addObj" @cancelAddDialog="cancelAddDialog" />
        <preview-dialog v-if="previewObj.isShow" :preview-obj="previewObj" @cancelPreviewDialog="cancelPreviewDialog" />
        <modify-dialog v-if="modifyObj.isShow" :modify-obj="modifyObj" @cancelModifyDialog="cancelModifyDialog" />

    </div>
</template>

<script>
import { get${meta}Page, delete${meta} } from '@/api/${apiUrl}'
import AddDialog from './add-dialog'
import PreviewDialog from './preview-dialog'
import ModifyDialog from './modify-dialog'
export default {
    name: '${meta}',
    components: {
        AddDialog,
        PreviewDialog,
        ModifyDialog
    },
    mixins: [

    ],
    props: {

    },
    data() {
        return {
            searchForm: {
                <#list searchList as item>
                    ${item.property}:'',
                </#list>
            },
            tableData: [],
            total: 0, // 总条数
            startRow: 0,
            endRow: 0,
            pageSize: 10, // 每页多少条
            currentPage: 1, // 当前页
            addObj: {
                isShow: false
            },
            previewObj: {
                isShow: false,
                id: ''
            },
            modifyObj: {
                isShow: false
            },
            loading: false
        }
    },
    computed: {

    },
    watch: {

    },
    created() {
        this.getDrop()
        this.search()
    },
    mounted() {

    },
    methods: {
        // 获取下拉数据
        getDrop() {

        },
        // 获取表格数据
        getTableData(currentPage, pageSize) {
            let params = {
                pageNo: currentPage,
                pageSize: pageSize,
                ...this.searchForm
            }
            this.loading = true
            get${meta}Page(params).then(res => {
                if (res.code === 0) {
                    var page = res.data
                    this.total = page.rowCount
                    this.startRow = (page.pageStart - 1) * page.pageSize + 1
                    this.endRow = this.startRow + page.pageSize - 1
                    this.currentPage = page.pageStart
                    this.pageSize = page.pageSize
                    this.tableData = page.rows
                    this.loading = false
                } else {
                    this.$alert(res.message, {
                        type: 'error',
                        confirmButtonText: '确定'
                    })
                    this.loading = false
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 查询
        search() {
            this.getTableData(1, this.pageSize)
        },
        // 重置
        restSearch() {
            this.$refs['searchForm'].resetFields()
            this.search()
        },
        // 新增弹出框
        addNewList() {
            this.addObj.isShow = true
        },
        // 分页器
        handleSizeChange(val) {
            this.pageSize = val
            this.getTableData(this.currentPage, this.pageSize)
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.getTableData(this.currentPage, this.pageSize)
        },
        // 关闭
        cancelAddDialog() {
            this.addObj.isShow = false
            this.search()
        },
        cancelModifyDialog() {
            this.modifyObj.isShow = false
            this.search()
        },
        cancelPreviewDialog() {
            this.previewObj.isShow = false
        },
        // 预览
        previewRow(row) {
            this.previewObj.isShow = true
            <#list showProperty as item>
            this.previewObj.${item.property} = row.${item.property}
            </#list>
        },
        editRow(row) {
            this.modifyObj.isShow = true
            <#list showProperty as item>
            this.modifyObj.${item.property} = row.${item.property}
            </#list>
        },
        success(response, file, fileList) {
            this.$alert(response.message, {
                type: 'success',
                confirmButtonText: '确定'
            })
            this.loading = false
            this.getTableDate()
        },
        // 作废
        deleteRow(row) {
            this.$confirm('您进行的是作废操作，是否继续?', '提示', {
                confirmButtonText: '是',
                cancelButtonText: '否',
                iconClass: 'el-icon-question'
            }).then(_ => {
                let params = {
                    id: row.${primaryKeyProperty}
                }
                delete${meta}(params).then(res => {
                    if (res.code === 0) {
                        //
                        this.loading = false
                        this.search()
                    } else {
                        this.$alert(res.message, {
                            type: 'error',
                            confirmButtonText: '确定'
                        })
                        this.loading = false
                    }
                }).catch(err => {
                    console.log(err)
                })
            }).catch(_ => {})
        }
    }
}
</script>

<style scoped lang="scss">

</style>
